<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!-- 取出部署的应用程序名或者是当前的项目名称 -->
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>首页</title>
        <meta name="description" content="">

        <%@include file="/WEB-INF/jsp/common/component/head.jsp"%>
        <link rel="stylesheet" href="${ctx}/assets/css/tpmo/normalize.css">
        <%--<link rel="stylesheet" href="${ctx}/assets/css/tpmo/font-awesome.css">--%>
        <link rel="stylesheet" href="${ctx}/assets/css/tpmo/templatemo-style.css">

        <style type="text/css">
            .bottomLoading{
                width:100%;
                height:56px;
                position: absolute;
                top:100%;
                /*left:50%;*/
                line-height:56px;
                color:#fff;
                padding-left:60px;
                font-size:15px;
                background: url(/assets/img/bottomLoading.gif) no-repeat center 50%;
                opacity: 0.7;
                z-index:9999;
                -moz-border-radius:20px;
                -webkit-border-radius:20px;
                border-radius:20px;
                filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
            }
        </style>
    </head>

    <body>
        <div id="top" class="navbar-wrapper">
            <%@include file="/WEB-INF/jsp/common/component/navbar.jsp"%>
        </div>

        <!-- 载入时特殊效果 -->
        <%--<div id="loader-wrapper">--%>
            <%--<div id="loader"></div>--%>
        <%--</div>--%>

        <div class="content-bg"></div>
        <%--<div class="bg-overlay"></div>--%>

        <!-- SITE TOP -->
        <div class="site-top">
            <div class="site-banner">
                <div class="container">
                    <div class="row">
                        <div class="col-md-offset-2 col-md-8 text-center">
                            <h2><span class="blue">福大</span><span class="green">二手书信息网</span></h2>
                            <p></p>
                        </div>
                    </div>
                    <div class="row">
                        <form action="#" role="form" method="post">
                            <div class="form-group">
                                <div class="col-sm-6 col-md-offset-3">
                                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="书名">
                                </div>
                                <div class="col-sm-3">
                                    <button type="submit" class="btn btn-default">搜索</button>
                                    <%--<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">--%>
                                </div>
                            </div>

                            <%--<fieldset class="col-md-offset-4 col-md-3 col-sm-8">--%>
                                <%--<input type="email" id="subscribe-email" placeholder="输入书名">--%>
                            <%--</fieldset>--%>
                            <%--<fieldset class="col-md-5 col-sm-4">--%>
                                <%--<input type="submit" id="subscribe-submit" class="button white" value="搜索">--%>
                            <%--</fieldset>--%>
                        </form>
                    </div>
                </div>
            </div> <!-- .site-banner -->
        </div> <!-- .site-top -->


        <!-- MAIN POSTS -->
        <div class="main-posts">
            <div class="container">
                <div class="row">
                    <div class="blog-masonry masonry-true">
                        <%--<div class="post-masonry col-md-4 col-sm-6">--%>
                            <%--<div class="post-thumb">--%>
                                <%--<img src="${ctx}/assets/img/tpmo/9.jpg" alt="">--%>
                                <%--<div class="title-over">--%>
                                    <%--<h4><a href="#">Pellentesque habitant morbi</a></h4>--%>
                                <%--</div>--%>
                                <%--<div class="post-hover text-center">--%>
                                    <%--<div class="inside">--%>
                                        <%--<i class="fa fa-plus"></i>--%>
                                        <%--<span class="date">13 Jan 2084</span>--%>
                                        <%--<h4><a href="#">Pellentesque habitant morbi</a></h4>--%>
                                        <%--<p>Fusce ullamcorper diam vel arcu scelerisque</p>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                        <%--</div> <!-- /.post-masonry -->--%>
                        <%--<div class="post-masonry col-md-4 col-sm-6">--%>
                            <%--<div class="post-thumb">--%>
                                <%--<img src="${ctx}/assets/img/tpmo/9.jpg" alt="">--%>
                                <%--<div class="title-over">--%>
                                    <%--<h4><a href="#">Pellentesque habitant morbi</a></h4>--%>
                                <%--</div>--%>
                                <%--<div class="post-hover text-center">--%>
                                    <%--<div class="inside">--%>
                                        <%--<i class="fa fa-plus"></i>--%>
                                        <%--<span class="date">13 Jan 2084</span>--%>
                                        <%--<h4><a href="#">Pellentesque habitant morbi</a></h4>--%>
                                        <%--<p>Fusce ullamcorper diam vel arcu scelerisque</p>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                        <%--</div> <!-- /.post-masonry -->--%>
                        <%--<div class="post-masonry col-md-4 col-sm-6">--%>
                            <%--<div class="post-thumb">--%>
                                <%--<img src="${ctx}/assets/img/tpmo/9.jpg" alt="">--%>
                                <%--<div class="title-over">--%>
                                    <%--<h4><a href="#">Pellentesque habitant morbi</a></h4>--%>
                                <%--</div>--%>
                                <%--<div class="post-hover text-center">--%>
                                    <%--<div class="inside">--%>
                                        <%--<i class="fa fa-plus"></i>--%>
                                        <%--<span class="date">13 Jan 2084</span>--%>
                                        <%--<h4><a href="#">Pellentesque habitant morbi</a></h4>--%>
                                        <%--<p>Fusce ullamcorper diam vel arcu scelerisque</p>--%>
                                    <%--</div>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                        <%--</div> <!-- /.post-masonry -->--%>
                    </div>
                </div>
            </div>
        </div>

        <div id="here" hidden class="post-masonry col-md-4 col-sm-6">
            <div class="post-thumb">
                <img src="${ctx}/assets/img/tpmo/9.jpg" alt="">
                <div class="title-over">
                    <h4><a href="#">Pellentesque habitant morbi</a></h4>
                </div>
                <div class="post-hover text-center">
                    <div class="inside">
                        <%--<i class="fa fa-plus"></i>--%>
                        <span class="date">13 Jan 2084</span>
                        <h4><a href="#">Pellentesque habitant morbi</a></h4>
                        <p>Fusce ullamcorper diam vel arcu scelerisque</p>
                    </div>
                </div>
            </div>
        </div> <!-- /.post-masonry -->
        <div class="bottomLoading">正在载入...</div>

        <div class="div">
        </div>

        <%--<%@include file="/WEB-INF/jsp/common/component/footer.jsp"%>--%>
        <%@include file="/WEB-INF/jsp/common/component/foot.jsp"%>
        <%--<script src="${ctx}/assets/js/tpmo/plugins.js"></script>--%>
        <script src="${ctx}/assets/js/tpmo/main.js"></script>
        <script src="${ctx}/assets/js/common/meteor.js"></script>

        <script>
            $(function(){
                $(window).scroll(function(){
                    if($(document).scrollTop() + 100 >= $(document).height()-$(window).height()){
                        var elem = $('#here').clone();
                        elem.removeAttr("id").removeAttr("hidden");
                        var elem2 = elem.clone();

                        var r = $(".blog-masonry");
                        var elems = [elem, elem2];
                        var $elems = $(elems);

                        r.isotope().append(elems).isotope('appended', elems).isotope('layout');
                    }
                });
            });
        </script>

        <!-- Preloader -->
        <script type="text/javascript">
            //<![CDATA[
            $(window).load(function() { // makes sure the whole site is loaded
                $('#loader').fadeOut(); // will first fade out the loading animation
                    $('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
                $('body').delay(350).css({'overflow-y':'visible'});
            });
            //]]>
        </script>
    </body>
</html>